<script setup>
import {ref, onMounted,reactive} from 'vue'; // 引入 ref 和 onMounted
import {queryStudentPaper,updateStudentPaper} from '../../api/sysStudentAnswerSheet/sysStudentAnswerSheet.ts';
import {ElMessage} from 'element-plus';
import { useRouter } from 'vue-router';
import 'dayjs/locale/zh-cn';
import {useUserStore} from '../../stores/userStore.ts';
import {selectIdAndData} from '../../api/user/user.ts';

const router = useRouter();
const examList = ref([]);
const loading = ref(false); // 添加加载状态

// 获取当前用户信息
const userStore = useUserStore();
// 当前用户信息
const userData = reactive({
  age: undefined,
  createTime:"",
  gender: "",
  id: undefined,
  imgUrl:"",
  name: "",
  password: "",
  router: "",
  studengOrteacherId: undefined,
  token: "",
  updateTime: "",
  username: "",
})
// 获取当前教师数据
const getTeacherData = async () => {
  await selectIdAndData(userStore.userInfo.studengOrteacherId).then(res => {
    userData.age = res.data.age;
    userData.createTime = res.data.createTime;
    userData.gender = res.data.gender;
    userData.id = res.data.id;
    userData.imgUrl = res.data.imgUrl;
    userData.name = res.data.name;
    userData.password = res.data.password;
    userData.router = res.data.router;
    userData.studengOrteacherId = res.data.studengOrteacherId;
    userData.token = res.data.token;
    userData.updateTime = res.data.updateTime;
    userData.username = res.data.username;
    console.log("userData:", userData)
  }).catch(e => {
    ElMessage.error(e.message)
  })
}

const ss = () => {

}

// 查询条件
const query = reactive({
  teacherId: undefined,
  state: 3,
});

// 获取原始数据与清洗数据
const getData = async () => {
  loading.value = true; // 开始加载
  // query.teacherId = userData.studengOrteacherId;
  console.log( query)
  await queryStudentPaper(query).then(res => {
    console.log(res);
    if (res.code === 200 && res.data) {
      examList.value = res.data;
      console.log("examList.value:", examList.value)
    } else {
      ElMessage.warning(res.msg || '未查询到数据');
      examList.value = []; // 如果没有数据，清空列表
    }
  }).catch(e => {
    console.error("API请求出错:", e);
    ElMessage.error("查询失败: " + (e.message || e));
    examList.value = []; // 出错时也清空列表
  }).finally(() => {
    loading.value = false; // 结束加载
  });
};

// 查看详情的示例方法
const handleViewDetail = (row) => {
  // ElMessage.info(`查看试卷 "${row.tesPaperName}" 的详情`);
  console.log('当前行数据:', row);
  router.push({
    path: '/main/testPaperGrading/Edit',
    query: {id: row.id}
  })
};

onMounted(async () => {
  await getTeacherData();
  await getData();
});
</script>

<template>
<!--试卷批改-->
  <h4>批改试卷</h4>
<!--  <el-button type="primary" @click="sa">保存</el-button>-->
  <el-divider/>
  <h4>指派给我的试卷</h4>
  <el-divider/>
  <el-container>
    <el-main>
      <!-- 动态表格展示考试数据 -->
      <el-table
          :data="examList"
          style="width: 100%; margin-top: 20px;"
          border
          stripe
          v-loading="loading"
      >
        <el-table-column type="index" label="序号" width="80" align="center"/>
        <el-table-column prop="id" label="考试ID" width="300px" align="center" show-overflow-tooltip/>
        <el-table-column prop="tesPaperName" label="试卷名称" width="150" align="center"/>
        <el-table-column prop="subject" label="科目" width="120" align="center"/>
        <el-table-column prop="studentName" label="学生姓名" width="120" align="center"/>
        <el-table-column prop="objectiveTestScores" label="客观题得分" width="120" align="center"/>
        <el-table-column prop="subjTestScores" label="主观题得分" width="120" align="center"/>
        <el-table-column prop="totalScores" label="总得分" width="120" align="center"/>
        <el-table-column prop="testStartTime" label="考试开始时间" width="270" align="center"/>
        <el-table-column prop="endTime" label="考试结束时间" width="270" align="center"/>
        <el-table-column prop="timeTaken" label="用时(秒)" width="100" align="center"/>
        <el-table-column label="操作" width="120" align="center" fixed="right">
          <template #default="scope">
            <el-button size="small" type="primary" @click="handleViewDetail(scope.row)">
              查看详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
  </el-container>
</template>

<style scoped>

</style>